<template>
    <!--头部区域-->
    <el-container class="home_container" id="b1">
        <el-header>
            <Gj_header></Gj_header>
        </el-header>

        <!--页面主体区域-->
        <el-container>
            <el-aside width="189px" style="background-color:#fff;">
                <Nav></Nav>
            </el-aside>
            <el-container>
                <!--右侧内容主体-->
                <el-main>
                    <Middle></Middle>
                </el-main>
                <el-footer height="30px">欢迎使用综测系统</el-footer>
            </el-container>
        </el-container>
    </el-container>
</template>

<script>
import Nav from '../components/nav.vue'
import Gj_header from '../components/header.vue'
import Middle from '../components/middle.vue'

window.onload=function (){
  // console.log("wozai")
  var b1=document.getElementById("b1")
  if(window.sessionStorage.getItem("HB")=="dark")
    b1.style.backgroundColor="#545454"
  else
    b1.style.backgroundColor="#fff"
}

export default {
    name: 'Home',
    components: {
        Gj_header,
        Middle,
        Nav
    },
    methods: {
        mounted () {
          console.log("wozai")
        },
      logout() {
            // 清空token
            window.sessionStorage.clear();
            // 跳转到登录页
            this.$router.push('/login')
        }
    },


    // 一运行就报错，有接口就可以解开注释
    // mounted(){
        // console.log(this.$store.state.com_data);
        // const usernum = this.$store.state.usernum
        //此处就获取该学生的基本信息：学号，姓名，学院，专业，班级，联系住址，手机号，班级综测排名，综测分数，已审核人数，未审核人数，直接放到vuex的state上
        /* this.$axios.get('http://localhost:/class/zhong').then(res=>{
            if(res.status===200){
              // console.log(res.data)

              this.$store.state.com_data.userNum = res.data[1].username
              this.$store.state.com_data.address=res.data[1].address
              this.$store.state.com_data.phone=res.data[1].phone
              // console.log(this.$store.state.com_data)
            }
            else{
                return "请求失败！"
            }
        }) */
    // }
}
</script>

<style lang="less" scoped>

.shine{
  background-color: #ffffff;
}

.dark{
  background-color: #545454;
}


.home_container {
    height: 100%;
}

.el-main {
    padding: 0;
    margin-left: 20px;
}

.el-aside {
    border-right: 1px solid #ccc;
}

.el-header {
    box-shadow: 0 5px 5px #8888;
    margin-bottom: 8px;
    margin-top: 10px;
}

.el-footer {
    text-align: center;
    margin-top: 20px;
}
</style>
